<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>order</title>
    <script>
        (function() {
            var nowWidth = document.documentElement.clientWidth;
            var thisWindowWidth = nowWidth > 750 ? 750 : nowWidth;
            document.documentElement.style.fontSize = thisWindowWidth / 750 * 625 + '%';
        })();
    </script>
    <link rel="stylesheet" href="../css/order.css">
</head>

<body>
    <div class="header">
        <div class="icon">
            < </div>
                <span>爱心捐赠</span>
        </div>
    </div>
    <div class="content">
        <div class="content_small">
            <span class="titleone">爱心捐赠</span>
            <span class="titletwo">一份爱心 一份温暖</span>
        </div>
        <div class="content_small">
            <div class="small_in">
                20份爱心
            </div>
            <div class="small_in">
                50份爱心
            </div>
            <div class="small_in">
                100份爱心
            </div>
            <div class="small_in">
                <input type="text" placeholder="自定义爱心份数">份爱心
            </div>
        </div>
        <div class="content_small">
            <span class="titletwo">注：1积分=1份爱心</span>
        </div>
    </div>
    <div class="content_title">
        选择支付方式
    </div>
    <div class="content">
        <div class="content_list">
            <div class="lii">
                <div class="text">
                    小计
                </div>
                <div class="intergal credit">
                    20积分
                </div>
            </div>
            <div class="lii" data-content="impose">
                <div class="text">
                    积分限制券
                </div>
                <div class="intergal">
                    使用>
                </div>
            </div>
            <div class="lii" data-content="resist">
                <div class="text">
                    积分抵用券
                </div>
                <div class="intergal">
                    使用>
                </div>
            </div>
            <div class="lii" data-content="credit">
                <div class="text">
                    积分
                </div>
                <div class="intergal credits">
                    20分>
                </div>
            </div>
            <div class="lii">
                <div class="text">现金</div>
                <div class="price center">0.00元</div>
                <div class="intergal2" data-content="chargeChoose">选择支付方式></div>
            </div>
            <div class="lii">
                <div class="text">验证码</div>
                <input type="text" class="code center" placeholder="请输入短信验证码">
                <div class="intergal2 send">发送验证码</div>
            </div>
        </div>
    </div>
    <div class="footer">
        确认支付
    </div>
    <!-- 限制券 -->
    <div class="impose">
        <div class="ifixed">
            <div class="ihead">
                <div class="ititle">使用限制券</div>
                <div class="iicon icon">×</div>
            </div>
            <div class="ichoose">
                <div class="ichoosei abate" id="truee">可用限制券(7张)</div>
                <div class="ichoosei" id="falsee">不可用限制券(2张)</div>
            </div>
        </div>
        <div class="icontent">
            <ul>
                <li>
                    <input type="radio">
                    <div class="divv">
                        <p>1200积分</p>
                        <div class="title">限制券到期时间：2016年7月8日 12：00：09</div>
                        <div class="text">备注：用于兑换金龙鱼 食用油 非转压榨 玉米油4L用于兑换金龙鱼 食用油 非转压榨 玉米油4L</div>
                        <a href="#">查看详情></a>
                    </div>
                </li>
                <li>
                    <input type="radio">
                    <div class="divv">
                        <p>1000积分</p>
                        <div class="title">限制券到期时间：2016年7月8日 12：00：09</div>
                        <div class="text">备注：用于兑换金龙鱼 食用油 非转压榨 玉米油4L用于兑换金龙鱼 食用油 非转压榨 玉米油4L</div>
                        <a href="#">查看详情></a>
                    </div>
                </li>
                <li>
                    <input type="radio">
                    <div class="divv">
                        <p>800积分</p>
                        <div class="title">限制券到期时间：2016年7月8日 12：00：09</div>
                        <div class="text">备注：用于兑换金龙鱼 食用油 非转压榨 玉米油4L用于兑换金龙鱼 食用油 非转压榨 玉米油4L</div>
                        <a href="#">查看详情></a>
                    </div>
                </li>
                <li>
                    <input type="radio">
                    <div class="divv">
                        <p>800积分</p>
                        <div class="title">限制券到期时间：2016年7月8日 12：00：09</div>
                        <div class="text">备注：用于兑换金龙鱼 食用油 非转压榨 玉米油4L用于兑换金龙鱼 食用油 非转压榨 玉米油4L</div>
                        <a href="#">查看详情></a>
                    </div>
                </li>
                <li>
                    <input type="radio">
                    <div class="divv">
                        <p>800积分</p>
                        <div class="title">限制券到期时间：2016年7月8日 12：00：09</div>
                        <div class="text">备注：用于兑换金龙鱼 食用油 非转压榨 玉米油4L用于兑换金龙鱼 食用油 非转压榨 玉米油4L</div>
                        <a href="#">查看详情></a>
                    </div>
                </li>
                <li>
                    <input type="radio">
                    <div class="divv">
                        <p>100积分</p>
                        <div class="title">限制券到期时间：2016年7月8日 12：00：09</div>
                        <div class="text">备注：用于兑换金龙鱼 食用油 非转压榨 玉米油4L用于兑换金龙鱼 食用油 非转压榨 玉米油4L</div>
                        <a href="#">查看详情></a>
                </li>
                <li>
                    <input type="radio">
                    <div class="divv">
                        <p>100积分</p>
                        <div class="title">限制券到期时间：2016年7月8日 12：00：09</div>
                        <div class="text">备注：用于兑换金龙鱼 食用油 非转压榨 玉米油4L用于兑换金龙鱼 食用油 非转压榨 玉米油4L</div>
                        <a href="#">查看详情></a>
                    </div>
                </li>
            </ul>
            </div>
            <div class="icontent1">
                <ul>
                    <li>
                        <div class="divv">
                            <p>100积分</p>
                            <div class="title">限制券到期时间：2016年7月8日 12：00：09</div>
                            <div class="text">备注：用于兑换金龙鱼 食用油 非转压榨 玉米油4L用于兑换金龙鱼 食用油 非转压榨 玉米油4L</div>
                            <a href="#">查看详情></a>
                        </div>
                    </li>
                    <li>
                        <div class="divv">
                            <p>100积分</p>
                            <div class="title">限制券到期时间：2016年7月8日 12：00：09</div>
                            <div class="text">备注：用于兑换金龙鱼 食用油 非转压榨 玉米油4L用于兑换金龙鱼 食用油 非转压榨 玉米油4L</div>
                            <a href="#">查看详情></a>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="ifoot">
                <div class="iftext">
                    <p>限制券使用规则</p>
                    <span>
                    1.适用范围：只能兑换允许兑换的礼品.
                </span>
                    <span>
                    2.每笔订单只能使用一张限制券。
                </span>
                    <span>
                    3.限制券只支持整张使用，未使用部分自动作废。例如：限制券面值为1000分，兑换礼品时使用限制券支付，支付600分。
                </span>
                </div>
                <div class="ifbutton">
                    确定
                </div>
            </div>
        </div>
        <!-- 抵制券 -->
        <div class="resist">
            <div class="rtitle">
                <div class="rtext">使用通信券</div>
                <div class="ricon icon">×</div>
            </div>
            <div class="rcontent">
                <div class="rcontent_small">
                    <div class="item">可用通信券</div>
                    <div class="item2">2020点</div>
                </div>
                <div class="rcontent_small">
                    <div class="item">即将到期</div>
                    <div class="item2">20点</div>
                </div>
                <div class="rcontent_small input">
                    <div class="item">通信券</div>
                    <div class="item2">
                        <input type="text" class="num" placeholder="请输入抵用券数">
                    </div>
                </div>
                <div class=" rcontent_small ">
                    <div class="item2 tips">注释：请使用10的整数倍</div>
                </div>
            </div>
            <div class="rfoot ">
                确定
            </div>
        </div>
        <!-- 积分 -->
        <div class="credit">
            <div class="ctitle">
                <div class="ctext">使用积分</div>
                <div class="cicon icon">×</div>
            </div>
            <div class="ccontent">
                <div class="ccontent_small">
                    <div class="item">可用积分</div>
                    <div class="item2">10020分</div>
                </div>
                <div class="ccontent_small">
                    <div class="item">即将到期</div>
                    <div class="item2">20分</div>
                </div>
                <div class="ccontent_small input">
                    <div class="item">使用积分</div>
                    <div class="item2">
                        <input type="text" class="num" value="20">
                    </div>
                </div>
                <div class=" ccontent_small ">
                    <div class="item2 tips">注释：请使用10的整数倍</div>
                </div>
            </div>
            <div class="cfoot ">
                确定
            </div>
        </div>
        <!-- 选择支付方式 -->
        <div class="chargeChoose">
            <div class="ctitle">
                <div class="ctext">请选择支付方式</div>
                <div class="ccicon icon">×</div>
            </div>
            <div class="ccontent">
                <div class="ccontent_small1">
                    <div class="item">
                        <div class="img">
                        </div>
                        <div class="text">
                            微信支付
                        </div>
                    </div>
                    <div class="item2">
                        <input type="radio" class="choose" str="微信支付">
                    </div>
                </div>
                <div class="ccontent_small2">
                    <div class="item">
                        <div class="img">
                        </div>
                        <div class="text">
                            支付宝
                        </div>
                    </div>
                    <div class="item2">
                        <input type="radio" class="choose" str="支付宝">
                    </div>
                </div>
            </div>
            <div class="cfoot ">
                确定
            </div>
        </div>
</body>
<script src="../js/jquery.min.js "></script>
<script src="../js/order.js "></script>

</html>